<template>
  <div class="dictionary-list">
    <!-- 查询条件 -->
    <div class="search">
      <el-input v-model="pageInfo.label" clearable placeholder="部门名称" @keyup.enter.native="handlerSelect"/>
      <el-select v-model="pageInfo.status" clearable placeholder="字典状态" @change="handlerSelect">
        <el-option
            v-for="(item,index) in statusEnum"
            :key="index"
            :label="item.value"
            :value="item.label">
        </el-option>
      </el-select>
      <el-button @click='handlerSelect'>查询</el-button>
      <el-button type='primary' @click='handlerCreate'>新增</el-button>
      <el-button type="danger" @click="handlerDeleteByBatch">删除</el-button>
    </div>

    <!-- 列表 -->
    <el-table
        :data='page.list'
        stripe
        border
        :header-cell-style="headCellStyle">
      <el-table-column
          type="selection"
          align="center"
          width="55">
      </el-table-column>
      <el-table-column
          prop='systemName'
          label='所属系统'
          align='center'>
      </el-table-column>
      <el-table-column
          prop='type'
          label='业务类型'
          align='center'>
      </el-table-column>
      <el-table-column
          prop='label'
          label='字典名称'
          align='center'>
      </el-table-column>
      <el-table-column
          prop='value'
          label='字典值'
          align='center'>
      </el-table-column>
      <el-table-column
          prop='orderNo'
          sortable
          label='排序号'
          align='center'>
      </el-table-column>
      <el-table-column
          label='状态'
          align='center'>
        <template v-slot="scope">
          <el-tag :type="Boolean(scope.row.status)?'':'success'">
            {{ scope.row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop='remark'
          label='备注'
          align='center'>
      </el-table-column>
      <el-table-column
          prop='createTime'
          label='创建时间'
          sortable
          align='center'>
        <template v-slot="scope">
          {{ scope.row.createTime | dateTimeFilter }}
        </template>
      </el-table-column>
      <!--<el-table-column-->
      <!--    prop='createByName'-->
      <!--    label='创建人'-->
      <!--    align='center'>-->
      <!--</el-table-column>-->
      <el-table-column label='操作' align='center'>
        <template v-slot='scope'>
          <el-button
              size='small'
              type='text'
              @click='handlerUpdate(scope.row.id)'>
            修改
          </el-button>
          <el-button
              size='small'
              type='text'
              @click='handlerDelete(scope.row.id)'>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @current-change='handleCurrentChange'
        :current-page.sync='page.pageNum'
        :page-size='page.pageSize'
        layout='total, prev, pager, next, jumper'
        :total='page.total'>
    </el-pagination>

    <department-dialog :show="showDialog" :id="id" @close="handlerCloseDialog"/>
  </div>
</template>

<script>

import { statusEnum } from '@/enums/CommonEnum'
import DepartmentApi from '@/apis/system/DepartmentApi'
import DepartmentDialog from '@/views/admin/permission/DepartmentDialog'

export default {
  name: 'DictionaryList',
  components: {
    DepartmentDialog,
  },
  data () {
    return {
      statusEnum: statusEnum,
      showDialog: false,
      id: null,
      pageInfo: {
        label: null,
        status: null,
        pageNum: 1,
        pageSize: 10
      },
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        list: [{}]
      }
    }
  },
  computed: {
    size () {
      return this.$store.getters['ElementUI/getSize']
    },
    headCellStyle () {
      return this.$store.getters['ElementUI/getHeaderCellStyle']
    },
  },
  filters: {
    statusFilter (value) {
      let status = statusEnum.find(item => item.label === value)
      return status ? status.value : null
    }
  },
  mounted () {
    this.handlerSelectList()
  },
  methods: {
    handlerSelect () {
      this.pageInfo.pageNum = 1
      this.handlerSelectList()
    },
    async handlerSelectList () {
      const res = await DepartmentApi.selectList(this.pageInfo)
      this.page = res.data
    },
    handlerCreate () {
      this.showDialog = true
    },
    handlerDeleteByBatch () {

    },
    async handlerUpdate (id) {
      console.log('update', id)
      this.id = id
      this.showDialog = true
    },
    async handlerDelete (id) {
      console.log('delete', id)
      const res = await DepartmentApi.deleteById(id)
      if (res.code === '0') {
        await this.handlerSelectList()
      } else {
        this.$message.error(res.message)
      }
    },
    handleCurrentChange () {
      this.pageInfo.pageNum = this.page.pageNum
      this.handlerSelectList()
    },
    /**
     * dialog关闭
     */
    handlerCloseDialog () {
      this.showDialog = false
      this.id = null
      this.handlerSelectList()
    }
  }
}
</script>

<style lang="scss" scoped>
.dictionary-list {
  .search {
    margin-bottom: 20px;

    .el-input {
      width: 200px;
    }

    .el-select {
      width: 150px;
      padding: 0 10px;
    }
  }

  .el-pagination {
    margin-top: 10px;
    text-align: center;
  }
}
</style>
